<template>
  <div>
    <common-head title="所有联系人"/>
    <div class="content">
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        v-if="list.length"
      />
      <van-button @click="$router.push('/addressAdd')" v-else>联系人列表为空，请前往添加</van-button>
    </div>
  </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      chosenAddressId: '-1'
    }
  },
  created () {
    this.initChosenId()
  },
  methods: {
    initChosenId () {
      /*
      联系人列表是不是空
      选中id 默认是 联系人列表中的 默认联系人的id
      如果没有默认联系人 默认是 第一个 联系人的id
      */
      // 判断是不是空
      if (this.list.length === 0) {
        return null
      }
      // 判断是否有默认联系人
      const defaultContact = this.list.find(add => add.isDefault)
      if (defaultContact) {
        // 有默认联系人
        this.chosenAddressId = defaultContact.id
      } else {
        // 没有默认联系人
        this.chosenAddressId = this.list[0].id
      }

      console.log(this.chosenAddressId)
    },
    onAdd () {
      this.$router.push('/addressAdd')
    },
    onEdit (params, index) {
      console.log(params, index)
      // 跳转路由
      this.$router.push({
        path: '/addressEdit',
        query: {
          index
        }
      })
    }
  },
  components: {
    CommonHead
  },
  computed: {
    ...mapState({
      list: state => state.address.list
    })
  }
}
</script>

<style lang="scss" scoped>
.content{
  margin-top:46px;
}
</style>
